/**
 * 受控组件受到了组件中状态的控制
 * 1、编写代码比较麻烦 2、受控组件容易更新页面，一旦状态变化之后，render就会被调用
 * 非受控组件
   1、概念：非受控组件不受state的控制,受DOM元素的控制，使用非受控就是进行DOM编程
   2、非受控组件操作表单有两种方案
   1）回调函数方式
   2）React.createRef方式
   3、回调函数的方式操作表单
   1)在表单元素上设置ref属性 ref={形式参数=this.成员变量=形式参数}
   2)在要使用的方法中 this.成员变量.value
   4、createRef方式操作表单
   1) 在构造函数调用React.createRef()并将其赋值给类中的实例属性
 * 2) 在页面元素中为要操作的元素设置ref属性，例如:<div ref={this.成员属性}>
 * 3) 使用：this.成员变量.current
   受控组件和非受控组件的区别
   1) 受控组件是由React状态控制的，非受控组件是由DOM元素控制的
   2）在受控组件中，组件的值由React状态控制。这意味着当组件的值发生变化时，React状态将更新，组件将重新渲染以反映新值。另外，您可以使用React状  态控制组件的值进行验证和处理。
   3）在非受控组件中，组件的值由DOM节点控制。这意味着当组件的值发生变化时，它将直接反映在DOM节点上，而不会更新React状态。这使得非受控组件可以更快地更新，但也使得验证和处理组件的值更加困难。
 */
import React, { Component } from 'react'

export default class App extends Component {

  login=()=>{
   console.log('用户名:',this.nameElement.value);
   console.log('密码:',this.pwdElement.value);
  }
  render() {
    return (
      <div>
         <div>
            <label htmlFor="name">姓名:</label>
            <input type="text" id='name' ref={arg=>this.nameElement=arg}/>
         </div>
         <div>
            <label htmlFor="pwd">密码:</label>
            <input type="text" id='pwd' ref={arg=>this.pwdElement=arg}/>
         </div>
         <div>
            <button onClick={this.login}>登录</button>
         </div>
      </div>
    )
  }
}
